react router英文官网：https://reactrouter.com/en/main

1.初始化项目

祝大家：开心学习，快乐生活，过好每一天~

1.1基于Vite创建React+TS项目

1、打开终端，运行下面的命令创建React+TS项目：

xxxxxxxxxx
5
1
# 初始化项目
2
npm create vite@latest
3
# 填写项目名称
4
# 框架选择 react
5
# 语言选择 typescript

2、cd到项目根目录中

3、运行npm i命令，安装依赖包

4、运行npm run dev命令，启动项目

5、查看项目运行效果

1.2初始化项目

整套教程其实是react router官网的tutorial的改写，加了部分注释和typescript，所以下面的很多代码可以在这里找到：https://reactrouter.com/en/main/start/tutorial。比如说下面要用到的CSS和js代码，就可以直接复制粘贴。

那是不是这门课买错了呢？没有买错，谁叫我看不懂英文文档的，中文文档我也提炼不出好的知识点。买这门课绝对没有错。

1、复制/粘贴教程所需的CSS样式到src/index.css中。

代码很多，直接复制即可，这里就不粘贴出来了。

2、复制/粘贴教程所需的Data数据到src/contacts.js中。在我们的项目中，老师建议使用老师改造好的TS类型的数据模块，复制/粘贴下面的代码到src/contacts.ts中。

xxxxxxxxxx
80
1
import localforage from 'localforage'
2
import { matchSorter } from 'match-sorter'
3
import sortBy from 'sort-by'
4
​
5
// 获取所有联系人
6
export async function getContacts(query?: string) {
7
  await fakeNetwork(`getContacts:${query}`)
8
  let contacts = await localforage.getItem<ContactType[]>('contacts')
9
  if (!contacts) contacts = []
10
  if (query) {
11
    contacts = matchSorter(contacts, query.toString(), { keys: ['first', 'last'] })
12
  }
13
  return contacts.sort(sortBy('last', 'createdAt'))
14
}
15
​
16
// 创建联系人，返回联系人对象，只包含 id 和创建时间
17
export async function createContact() {
18
  await fakeNetwork()
19
  const id = Math.random().toString(36).substring(2, 9)
20
  const contact = { id, createdAt: Date.now() }
21
  const contacts = await getContacts()
22
  contacts.unshift(contact)
23
  await set(contacts)
24
  return contact
25
}
26
​
27
// 根据 id 获取联系人
28
export async function getContact(id: string) {
29
  await fakeNetwork(`contact:${id}`)
30
  const contacts = (await localforage.getItem<ContactType[]>('contacts')) || []
31
  const contact = contacts.find((contact) => contact.id === id)
32
  return contact ?? null
33
}
34
​
35
// 根据 id 和表单数据，更新联系人信息
36
export async function updateContact(id: string, updates: Omit<ContactType, 'id'>) {
37
  await fakeNetwork()
38
  const contacts = (await localforage.getItem<ContactType[]>('contacts')) || []
39
  const contact = contacts.find((contact) => contact.id === id)
40
  if (!contact) throw new Error('No contact found for')
41
  Object.assign(contact, updates)
42
  await set(contacts)
43
  return contact
44
}
45
​
46
// 根据 id 删除联系人
47
export async function deleteContact(id: string) {
48
  const contacts = (await localforage.getItem<ContactType[]>('contacts')) || []
49
  const index = contacts.findIndex((contact) => contact.id === id)
50
  if (index > -1) {
51
    contacts.splice(index, 1)
52
    await set(contacts)
53
    return true
54
  }
55
  return false
56
}
57
​
58
function set(contacts: ContactType[]) {
59
  return localforage.setItem('contacts', contacts)
60
}
61
​
62
// fake a cache so we don't slow down stuff we've already seen
63
let fakeCache: { [key in string]: boolean } = {}
64
​
65
// 模拟网络请求的延迟时间
66
async function fakeNetwork(key?: string) {
67
  if (!key) {
68
    fakeCache = {}
69
    key = ''
70
  }
71
​
72
  if (fakeCache[key]) {
73
    return
74
  }
75
​
76
  key && (fakeCache[key] = true)
77
  return new Promise((res) => {
78
    setTimeout(res, Math.random() * 800)
79
  })
80
}

在src/vite-env.d.ts模块中，新增ContactType类型定义：

xxxxxxxxxx
12
1
/// <reference types="vite/client" />
2
​
3
type ContactType = {
4
  id: string;
5
  first?: string;
6
  last?: string;
7
  avatar?: string;
8
  twitter?: string;
9
  notes?: string;
10
  favorite?: boolean;
11
};
12
​

3、安装相关的依赖包：

xxxxxxxxxx
2
1
npm i react-router-dom localforage match-sorter sort-by
2
npm i --save-dev @types/sort-by

4、删除src/App.tsx和src/App.css文件

5、修改src/main.tsx文件，删除App组件相关的代码：

xxxxxxxxxx
11
1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
// import App from './App.tsx'
4
import './index.css'
5
​
6
ReactDOM.createRoot(document.getElementById('root')!).render(
7
  <React.StrictMode>
8
    {/* <App /> */}
9
    <h1>Tutorial</h1>
10
  </React.StrictMode>,
11
)

完成后效果：

1.3添加Browser Router路由

1、在src/main.tsx中，按需导入createBrowserRouter函数和RouterProvider组件：

xxxxxxxxxx
2
1
// 1、导入 createBrowserRouter 和 RouterProvider
2
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

2、创建browser router对象：

xxxxxxxxxx
8
1
// 2、创建 browser router
2
const router = createBrowserRouter([
3
  // 配置路由
4
  {
5
    path: '/',
6
    element: <h1>Hello react-router v6!</h1>
7
  }
8
])

3、基于RouterProvider组件的router属性，配置项目的路由：

xxxxxxxxxx
5
1
ReactDOM.createRoot(document.getElementById('root')!).render(
2
  <React.StrictMode>
3
    <RouterProvider router={router} />
4
  </React.StrictMode>,
5
)

效果：

实际开发中，选择Browser Rotuer还是Hash Router？

1、如果要兼容低版本的浏览器，则推荐使用 Hash Router。

2、否则，建议使用 Browser Router，因为它功能更强大，能够使用浏览器的历史对象管理路由信息。

1.4创建根路由的组件

1、创建src/components下的root.tsx模块

2、复制/粘贴如下的组件代码到src/routes/root.tsx中：

xxxxxxxxxx
47
1
import { FC } from 'react'
2
​
3
const Root: FC = () => {
4
    return (
5
        <>
6
            <div id="sidebar">
7
                <h1>React Router Contacts</h1>
8
                <div>
9
                    <form id="search-form" role="search">
10
                        <input
11
                            id="q"
12
                            aria-label="Search contacts"
13
                            placeholder="Search"
14
                            type="search"
15
                            name="q"
16
                        />
17
                        <div
18
                            id="search-spinner"
19
                            aria-hidden
20
                            hidden={true}
21
                        />
22
                        <div
23
                            className="sr-only"
24
                            aria-live="polite"
25
                        ></div>
26
                    </form>
27
                    <form method="post">
28
                        <button type="submit">New</button>
29
                    </form>
30
                </div>
31
                <nav>
32
                    <ul>
33
                        <li>
34
                            <a href={`/contacts/1`}>Your Name</a>
35
                        </li>
36
                        <li>
37
                            <a href={`/contacts/2`}>Your Friend</a>
38
                        </li>
39
                    </ul>
40
                </nav>
41
            </div>
42
            <div id="detail"></div>
43
        </>
44
    );
45
}
46
​
47
export default Root;

3、修改src/main.tsx文件，导入Root组件，并渲染为/路径的element节点：

xxxxxxxxxx
22
1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
import './index.css'
4
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
5
​
6
// 1、导入路由组件
7
import Root from './components/root'
8
​
9
const router = createBrowserRouter([
10
  // 2、配置路由
11
  {
12
    path: '/',
13
    element: <Root />
14
  }
15
])
16
​
17
​
18
ReactDOM.createRoot(document.getElementById('root')!).render(
19
  <React.StrictMode>
20
    <RouterProvider router={router} />
21
  </React.StrictMode>,
22
)

效果：

注意：如果您想用@指向src/目录，需要配置项目下的vite.config.ts和tsconfig.json文件。

1.5补充：配置@路径

1. 安装 node 的类型声明：

xxxxxxxxxx
1
1
npm i -D @types/node

为什么需要配置@路径提示？

因为这样很方便，在引入外部文件的时候，一般使用的是相对路径，但是相对路径不是明确，接手的人不容易找到文件所在位置。

如果是按照src目录下来找，就会很明确，依次查找文件即可。

项目创建后，默认使用的就是相对路径。

2. 配置 vite.config.ts 文件：

xxxxxxxxxx
13
1
// 1. 以 ES6 模块化的方式，从 Node 的 path 模块中，导入 join 函数
2
import { join } from 'path'
3
​
4
// https://vitejs.dev/config/
5
export default defineConfig({
6
    plugins: [react()],
7
    // 2. 在 resolve.alias 对象下，配置 @ 的指向路径
8
    resolve: {
9
      alias: {
10
        '@': join(__dirname, './src/')
11
      }
12
    }
13
})

只需要添加代码即可，原有的代码不需要动。

3. 配置 tsconfig.json 文件，在 compilerOptions 节点下，新增 "baseUrl": "." 和 "paths": { "@/*": [ "src/*" ] } 两项：

xxxxxxxxxx
40
1
{
2
    "compilerOptions": {
3
      /* 新增以下两个配置项，分别是 baseUrl 和 paths */
4
      "baseUrl": ".",
5
      "paths": {
6
        "@/*": [
7
          "src/*"
8
        ]
9
      },
10
      "target": "ES2020",
11
      "useDefineForClassFields": true,
12
      "lib": [
13
        "ES2020",
14
        "DOM",
15
        "DOM.Iterable"
16
      ],
17
      "module": "ESNext",
18
      "skipLibCheck": true,
19
      /* Bundler mode */
20
      "moduleResolution": "bundler",
21
      "allowImportingTsExtensions": true,
22
      "resolveJsonModule": true,
23
      "isolatedModules": true,
24
      "noEmit": true,
25
      "jsx": "react-jsx",
26
      /* Linting */
27
      "strict": true,
28
      "noUnusedLocals": true,
29
      "noUnusedParameters": true,
30
      "noFallthroughCasesInSwitch": true
31
    },
32
    "include": [
33
      "src"
34
    ],
35
    "references": [
36
      {
37
        "path": "./tsconfig.node.json"
38
      }
39
    ]
40
}

这样，就可以使用@来表示/src/目录了。

启动项目，没有问题。

2.路由的基本用法

2.1处理Not Found错误

目前，点击左侧任意的导航链接，会导航到 react router 默认提供的错误页。

为了使用户体验更好，我们在进行项目开发时，一般都会自定义错误页。

1、创建src/error-page.tsx错误页，对应的组件如下：

xxxxxxxxxx
15
1
import { FC } from 'react'
2
​
3
const ErrorPage: FC = () => {
4
    return (
5
        <div id='error-page'>
6
            <h1>Oops!</h1>
7
            <p>Sorry, an unexpected error has occurred.</p>
8
            <p>
9
                <i>**具体的错误信息**</i>
10
            </p>
11
        </div>
12
    )
13
}
14
​
15
export default ErrorPage

2、把<ErrorPage />设置为根路由的errorElement属性：

xxxxxxxxxx
24
1
import React from 'react'
2
import ReactDOM from 'react-dom/client'
3
import '@/index.css'
4
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
5
import Root from '@/components/root'
6
​
7
// 1、导入自定义的  组件
8
import ErrorPage from '@/error-page'
9
​
10
const router = createBrowserRouter([
11
  // 2、errorElement 指定错误页
12
  {
13
    path: '/',
14
    element: <Root />,
15
    errorElement: <ErrorPage />
16
  }
17
])
18
​
19
​
20
ReactDOM.createRoot(document.getElementById('root')!).render(
21
  <React.StrictMode>
22
    <RouterProvider router={router} />
23
  </React.StrictMode>,
24
)

此时，点击左侧任意的导航链接，当无法匹配任何路由时，就会展示根路由的errorElement属性所匹配的<ErrorPage />错误页。

效果：

3、为了能在ErrorPage中展示具体的错误消息，我们需要使用react-router-dom提供的useRouteErrorhook：

xxxxxxxxxx
20
1
import { FC } from 'react'
2
import { useRouteError } from 'react-router-dom'
3
import type { ErrorResponse } from "react-router-dom"
4
​
5
const ErrorPage: FC = () => {
6
    // 这里的路由错误的类型本身就只有ErrorResponse，但是由于错误可能是多种原因造成的，特别是后面的案例中会手动抛出一个错误 throw new Error，所以这里就增加了错误的类型。
7
    const error = useRouteError() as ErrorResponse & Error
8
​
9
    return (
10
        <div id='error-page'>
11
            <h1>Oops!</h1>
12
            <p>Sorry, an unexpected error has occurred.</p>
13
            <p>
14
                <i>{error.statusText || error.message}</i>
15
            </p>
16
        </div>
17
    )
18
}
19
​
20
export default ErrorPage

效果：

2.2渲染联系人相关的路由组件

1、在src/components目录下新建contact.tsx模块，并把对应的UI结构复制/粘贴进去：

xxxxxxxxxx
95
1
import { FC } from 'react'
2
import { Form } from "react-router-dom";
3
​
4
const Contact: FC = () => {
5
    // 静态数据
6
    const contact: ContactType = {
7
        id: "",
8
        first: "Your",
9
        last: "Name",
10
        avatar: "https://placekitten.com/g/200/200",
11
        twitter: "your_handle",
12
        notes: "Some notes",
13
        favorite: true,
14
    };
15
​
16
    return (
17
        <div id="contact">
18
            <div>
19
                <img
20
                    key={contact.avatar}
21
                    src={contact.avatar || ''}
22
                />
23
            </div>
24
​
25
            <div>
26
                <h1>
27
                    {contact.first || contact.last ? (
28
                        <>
29
                            {contact.first} {contact.last}
30
                        </>
31
                    ) : (
32
                        <i>No Name</i>
33
                    )}{" "}
34
                    <Favorite contact={contact} />
35
                </h1>
36
​
37
                {contact.twitter && (
38
                    <p>
39
                        <a
40
                            target="_blank"
41
                            href={`https://twitter.com/${contact.twitter}`}
42
                        >
43
                            {contact.twitter}
44
                        </a>
45
                    </p>
46
                )}
47
​
48
                {contact.notes && <p>{contact.notes}</p>}
49
​
50
                <div>
51
                    <Form action="edit">
52
                        <button type="submit">Edit</button>
53
                    </Form>
54
                    <Form
55
                        method="post"
56
                        action="destroy"
57
                        onSubmit={(event) => {
58
                            if (
59
                                !confirm(
60
                                    "Please confirm you want to delete this record."
61
                                )
62
                            ) {
63
                                event.preventDefault();
64
                            }
65
                        }}
66
                    >
67
                        <button type="submit">Delete</button>
68
                    </Form>
69
                </div>
70
            </div>
71
        </div>
72
    );
73
}
74
​
75
const Favorite: FC<{ contact: ContactType }> = ({ contact }) => {
76
    // yes, this is a `let` for later
77
    const favorite = contact.favorite;
78
    return (
79
        <Form method="post">
80
            <button
81
                name="favorite"
82
                value={favorite ? "false" : "true"}
83
                aria-label={
84
                    favorite
85
                        ? "Remove from favorites"
86
                        : "Add to favorites"
87
                }
88
            >
89
                {favorite ? "★" : "☆"}
90
            </button>
91
        </Form>
92
    );
93
}
94
​
95
export default Contact;

2、修改src/main.tsx中的代码，导入Contact组件：

xxxxxxxxxx
1
1
import Contact from '@/components/contact'

并添加路由配置如下：

xxxxxxxxxx
12
1
const router = createBrowserRouter([
2
  {
3
    path: '/',
4
    element: <Root />,
5
    errorElement: <ErrorPage />
6
  },
7
  // :id  表示这里是动态路由，接收的动态路由参数是 id。这里其实是将 contacts/:id 路由放到了根路由 / 的同级。
8
  {
9
    path: "contacts/:id",
10
    element: <Contact />
11
  }
12
])

效果：

2.3基于嵌套路由渲染Contact组件

需求：我们希望把 Contact 组件渲染到 Root 组件中右侧的位置，而不是像上面那样，是整个页面。具体位置是：把 Contact 组件渲染到Root组件的 id 为 detail 的 div 中。

1、修改src/main.tsx中的代码，通过 children 属性把contacts/:id的Route定义为/Route的子路由：

xxxxxxxxxx
15
1
const router = createBrowserRouter([
2
  {
3
    path: '/',
4
    element: <Root />,
5
    errorElement: <ErrorPage />,
6
    // 子路由
7
    children: [
8
      {
9
        // 这里的contacts前面不要加 / 开头，这是react-router-dom官方建议的。因为在访问这个路由的时候，react-router会将前面所有父级的路由拼接到前面，所以这里不要带父级的path。
10
        path: "contacts/:id",
11
        element: <Contact />
12
      }
13
    ]
14
  },
15
])

2、修改src/components/root.tsx中的代码，从react-router-dom中导入Outlet组件（占位符）：

xxxxxxxxxx
1
1
import { Outlet } from 'react-router-dom'

并把它放到id属性为detail的div中：

xxxxxxxxxx
3
1
<div id="detail">
2
    <Outlet />
3
</div>

效果：

2.4使用Link代替普通的a链接

在上面的例子中，可以看到跳转链接的时候，浏览器的刷新按钮会刷新，那么在现代前端框架下，我们都是使用无刷新的路由跳转，所以可以使用Link代替普通的a链接。

1、在src/components/root.tsx中导入Link组件

xxxxxxxxxx
1
1
import { Link } from "react-router-dom"

2、使用Link代替普通的a链接

xxxxxxxxxx
12
1
<nav>
2
    <ul>
3
        <li>
4
            {/* <a href={`/contacts/1`}>Your Name</a> */}
5
            <Link to="/contacts/1">Your Name</Link>
6
        </li>
7
        <li>
8
            {/* <a href={`/contacts/2`}>Your Friend</a> */}
9
            <Link to="/contacts/2">Your Friend</Link>
10
        </li>
11
    </ul>
12
</nav>

效果：

可以看到，无论路由怎么切换，浏览器的刷新按钮都不会动。

3.路由组件的数据操作

这部分的内容是非常新的内容，无论是vue还是react尚硅谷版本，都没有这个内容，以往学习路由的时候，只是要求页面能够跳转即可，数据就在vue生命周期或者react生命周期中处理，在vue中这样写是没有问题的，但是在react中，特别是使用hooks的时候，这样写就会非常麻烦，重复代码也很多，所以就出现了data APIs。多学几遍。

了解路由中的data APIs：

基本用法

1、在src/components/root.tsx中，Root组件平级的位置定义并暴露出loader函数：

xxxxxxxxxx
7
1
// 定义当前路由组件，需要用到的 loader 函数
2
export const loader = () => {
3
    // 为了证明 loader 函数在挂载后确实执行了，这里输出一句话
4
    console.log('loader执行了')
5
    // loader函数必须要return一个 null或数据，不能return undefined
6
    return null
7
}

2、在src/main.tsx中，导入并重命名loader，并挂载到路由上：

xxxxxxxxxx
18
1
// 导入loader函数，并重命名
2
import Root, { loader as rootLoader } from '@/components/root'
3
​
4
const router = createBrowserRouter([
5
  {
6
    path: '/',
7
    element: <Root />,
8
    errorElement: <ErrorPage />,
9
    // 配置 loader 属性
10
    loader: rootLoader,
11
    children: [
12
      {
13
        path: "contacts/:id",
14
        element: <Contact />
15
      }
16
    ]
17
  },
18
])

效果：

结果说明：在进入root组件之前，会先调用loader函数，再渲染组件。

3、使用react-router-dom提供的useLoaderData这个hook来获取loader函数返回的数据：

效果：

3.1加载初始数据

1、修改src/components/root.tsx模块，先从src/contacts.ts中按需导入数据API：

xxxxxxxxxx
1
1
import { getContacts } from "@/contacts.ts"

再创建名为的函数，并向外按需导出：

xxxxxxxxxx
8
1
// 下面这段代码是为了消除掉loader下面的波浪线提示的
2
/* eslint-disable react-refresh/only-export-components */
3
​
4
// 定义当前路由组件，需要用到的 loader 函数。
5
export const loader = async () => {
6
    const contacts = await getContacts();
7
    return contacts
8
}

2、修改src/main.tsx模块，先从src/components/root.tsx按需导入loader函数：

xxxxxxxxxx
1
1
import Root, { loader as rootLoader } from '@/components/root'

再给对应的Route添加选项：

xxxxxxxxxx
15
1
const router = createBrowserRouter([
2
  {
3
    path: '/',
4
    element: <Root />,
5
    errorElement: <ErrorPage />,
6
    // 配置 loader 属性
7
    loader: rootLoader,
8
    children: [
9
      {
10
        path: "contacts/:id",
11
        element: <Contact />
12
      }
13
    ]
14
  },
15
])

3、在src/components/root.tsx组件中，使用useLoaderData获取loader返回的数据，并根据返回的数据渲染组件：

xxxxxxxxxx
68
1
import { FC } from 'react'
2
import { Outlet, Link, useLoaderData } from 'react-router-dom'
3
import { getContacts } from '@/contacts'
4
​
5
const Root: FC = () => {
6
    // 获取从loader返回的数据
7
    const contacts = useLoaderData() as ContactType[];
8
    console.log('contacts = ',contacts)
9
​
10
    // 定义根据contacts渲染的元素
11
    const renderContacts = () => {
12
        if (contacts.length === 0) {
13
            return <p><i>No contacts!</i></p>
14
        }
15
        return (
16
            <ul>
17
                {
18
                    contacts.map((item) => {
19
                        return <li key={item.id}>
20
                            <Link to={`/contacts/${item.id}`}>
21
                                {item.first || item.last ? <>{item.first} {item.last}</> : <i>No Name</i>}
22
                                {item.favorite && <span>☆</span>}
23
                            </Link>
24
                        </li>
25
                    })
26
                }
27
            </ul>
28
        )
29
    }
30
​
31
    return (
32
        <>
33
            <div id="sidebar">
34
                <h1>React Router Contacts</h1>
35
                <div>
36
                    <form id="search-form" role="search">
37
                        <input
38
                            id="q"
39
                            aria-label="Search contacts"
40
                            placeholder="Search"
41
                            type="search"
42
                            name="q"
43
                        />
44
                        <div
45
                            id="search-spinner"
46
                            aria-hidden
47
                            hidden={true}
48
                        />
49
                        <div
50
                            className="sr-only"
51
                            aria-live="polite"
52
                        ></div>
53
                    </form>
54
                    <form method="post">
55
                        <button type="submit">New</button>
56
                    </form>
57
                </div>
58
                <nav>
59
                    {/* 执行渲染函数 */}
60
                    {renderContacts()}
61
                </nav>
62
            </div>
63
            <div id="detail">
64
                <Outlet />
65
            </div>
66
        </>
67
    );
68
}

效果：

3.2创建联系人

需求：在进行CURD操作时，把操作提交到action中进行处理。

可以预料到，如果一个大型项目中，使用Form来提交操作的话，会导致router非常臃肿，虽然可以通过拆分的方式来缓解，但是这种编码方式是一种全新的挑战，真正做项目之前看一下别人的案例，做就行了。

1、这里就需要使用到react-router-dom提供的Form组件，将src/components/root.tsx中原来的form组件换为Form组件。

xxxxxxxxxx
6
1
import { Outlet, Link, useLoaderData,Form } from 'react-router-dom'
2
​
3
{/* 新增联系人的 form 表单。这里的 form 由于要提交到action进行处理，所以换为了 react-router-dom 的Form 。那么这里面的action就表示提交到哪个 path 下的action进行处理，如果省略了action，那么这段代码所在的组件属于哪个路由，就会提交到哪个路由的action进行处理。 */}
4
<Form method="post" action='/'>
5
    <button type="submit">New</button>
6
</Form>

2、在src/components/root.tsx中，创建并暴露出一个action函数：

xxxxxxxxxx
4
1
export const action = () => {
2
    console.log('action')
3
    return null
4
}

3、在src/main.tsx中，导入并将配置根路由的action属性：

xxxxxxxxxx
19
1
// 导入 action 函数，并重命名
2
import Root, { loader as rootLoader, action as rootAction } from '@/components/root'
3
​
4
const router = createBrowserRouter([
5
  {
6
    path: '/',
7
    element: <Root />,
8
    errorElement: <ErrorPage />,
9
    loader: rootLoader,
10
    // 配置 action 属性
11
    action: rootAction,
12
    children: [
13
      {
14
        path: "contacts/:id",
15
        element: <Contact />
16
      }
17
    ]
18
  },
19
])

效果：

4、使用contacts.ts中定义好的新增方法，在定义的action函数中执行这个方法：

xxxxxxxxxx
6
1
import { getContacts,createContact } from '@/contacts'
2
​
3
export const action = async () => {
4
    const contact = await createContact();
5
    return contact
6
}

点击New按钮，看一下效果：

可以看到新增了两个no name的contacts，并且新增之后会自动渲染到sidebar上面，为什么呢？

因为在action执行完成之后，会重新执行loader函数，并重新渲染组件。口说无凭，在定义的loader和action函数里面输出一些东西，看一下效果：

注意：action函数中是否需要 return 数据？

上面点击按钮后，实际上渲染的是从loader中拿到的数据，并不是从action中拿到的数据，那action中return出去的数据，到哪去了呢？

实际上return到了路由中action属性所在的path指向的组件中。使用react-router-dom提供的useActionData就可以拿到这个数据。

测试一下：

xxxxxxxxxx
14
1
import { FC } from 'react'
2
import { Outlet, Link, useLoaderData, Form, useActionData } from 'react-router-dom'
3
import { getContacts, createContact } from '@/contacts'
4
​
5
const Root: FC = () => {
6
​
7
 const contacts = useLoaderData() as ContactType[];
8
 // console.log('contacts = ', contacts)
9
​
10
 const data = useActionData();
11
 console.log('action = ',data)
12
​
13
 // 其余代码省略
14
}

效果：

但其实在action函数中，如果不是特殊情况要从useActionData()里面获取数据的话，是没有必要在action函数中return数据出去的，所以一般的action函数写成这样：

xxxxxxxxxx
4
1
export const action = async () => {
2
 await createContact();
3
 return null
4
}

下面说明一下action的执行流程：

3.3在loader中访问params参数

目前，contact.tsx组件中的联系人信息是写死的静态数据。当使用路由加载此组件时，我们应该在loader中获取联系人的id，并动态请求联系人的数据进行渲染。

1、修改src/components/contact.tsx组件，从react-router-dom中按需导入LoaderFunctionArgs这个TS类型，它表示loader函数的形参类型：

xxxxxxxxxx
4
1
// 这种导入方式是导入 组件或方法
2
import { Form } from "react-router-dom"
3
// 这种导入方式是导入 TS类型，其实这里的 type 可以省略，但为了代码清晰，还是可以作区分的。
4
import type { LoaderFunctionArgs } from "react-router-dom"

然后，从src/contacts.ts中导入需要的数据API：

xxxxxxxxxx
1
1
import { getContact } from "@/contacts.ts"

最后，创建并向外导出名为的函数：

xxxxxxxxxx
6
1
// 通过 params 可以访问到 Route path 中的动态参数
2
export const loader = async ({ params }: LoaderFunctionArgs) => {
3
    // 调用接口，获取用户数据。注意：params.id! 这里的 ! 表示类型推断排除null、undefined，也就是说确认不可能为空。参考：https://blog.csdn.net/weixin_44867717/article/details/120904728
4
    const contact = await getContact(params.id!);
5
    return { contact }
6
}

2、修改src/main.tsx组件，从src/routes/contact.tsx中按需导入loader后重命名为contactLoader：

xxxxxxxxxx
1
1
import Contact, { loader as contactLoader } from '@/components/contact'

把contactLoader挂载给path为contacts/:id的Route：

xxxxxxxxxx
16
1
const router = createBrowserRouter([
2
  {
3
    path: '/',
4
    element: <Root />,
5
    errorElement: <ErrorPage />,
6
    loader: rootLoader,
7
    action: rootAction,
8
    children: [
9
      {
10
        path: "contacts/:id",
11
        element: <Contact />,
12
        loader: contactLoader
13
      }
14
    ]
15
  },
16
])

3、修改src/components/contacts.tsx组件，从react-router-dom中按需导入useLoaderData这个hook：

xxxxxxxxxx
1
1
import { Form, LoaderFunctionArgs, useLoaderData } from "react-router-dom";

修改Contact组件，将组件内部写死的静态数据，替换为useLoaderData的调用，从而根据id获取联系人的信息：

xxxxxxxxxx
6
1
const Contact: FC = () => {
2
    // 获取 loader 返回的数据
3
    const { contact } = useLoaderData() as { contact: ContactType };
4
​
5
    // 省略其余代码
6
}

效果：

从上面的例子可以看到，loader和路由是对应的关系，和对应的组件也是一一对应的关系，那么虽然使用的都是useLoaderData()，拿到的数据却是准确的，这一点要理解清楚。

3.4更新联系人信息

3.4.1绘制更新联系人信息的路由组件

1、在src/components目录下新建edit.tsx组件，代码如下：

xxxxxxxxxx
72
1
import { FC } from 'react'
2
// 按需导入组件和hook
3
import { Form, useLoaderData } from "react-router-dom";
4
import type { LoaderFunctionArgs } from 'react-router-dom';
5
import { getContact } from '@/contracts';
6
​
7
const EditContact: FC = () => {
8
    // 获取联系人的数据，用来回显
9
    const { contact } = useLoaderData() as { contact: ContactType };
10
​
11
    return (
12
        // 注意：这里使用的是 react-router-dom 提供的 Form 组件
13
        <Form method="post" id="contact-form">
14
            <p>
15
                <span>Name</span>
16
                <input
17
                    placeholder="First"
18
                    aria-label="First name"
19
                    type="text"
20
                    name="first"
21
                    defaultValue={contact.first}
22
                />
23
                <input
24
                    placeholder="Last"
25
                    aria-label="Last name"
26
                    type="text"
27
                    name="last"
28
                    defaultValue={contact.last}
29
                />
30
            </p>
31
            <label>
32
                <span>Twitter</span>
33
                <input
34
                    type="text"
35
                    name="twitter"
36
                    placeholder="@jack"
37
                    defaultValue={contact.twitter}
38
                />
39
            </label>
40
            <label>
41
                <span>Avatar URL</span>
42
                <input
43
                    placeholder="https://example.com/avatar.jpg"
44
                    aria-label="Avatar URL"
45
                    type="text"
46
                    name="avatar"
47
                    defaultValue={contact.avatar}
48
                />
49
            </label>
50
            <label>
51
                <span>Notes</span>
52
                <textarea
53
                    name="notes"
54
                    defaultValue={contact.notes}
55
                    rows={6}
56
                />
57
            </label>
58
            <p>
59
                <button type="submit">Save</button>
60
                <button type="button">Cancel</button>
61
            </p>
62
        </Form>
63
    );
64
}
65
​
66
// 通过 params 可以访问到 Route path 中的动态参数
67
export const loader = async ({ params }: LoaderFunctionArgs) => {
68
    const contact = await getContact(params.id!)
69
    return { contact }
70
}
71
​
72
export default EditContact;

2、在src/main.tsx中新增路由规则：

xxxxxxxxxx
24
1
import EditContact, { loader as editContactLoader } from '@/components/edit'
2
​
3
const router = createBrowserRouter([
4
  {
5
    path: '/',
6
    element: <Root />,
7
    errorElement: <ErrorPage />,
8
    loader: rootLoader,
9
    action: rootAction,
10
    children: [
11
      {
12
        path: "contacts/:id",
13
        element: <Contact />,
14
        loader: contactLoader
15
      },
16
      // 新增子路由
17
      {
18
        path: "contacts/:id/edit",
19
        element: <EditContact />,
20
        loader: editContactLoader
21
      }
22
    ]
23
  },
24
])

3、点击详情页面的edit按钮，就可以跳转到相应的页面了：

3.4.2以FormData格式更新联系人的信息

需求：点击编辑页面的Save按钮，可以保存联系人的信息，并在保存成功后，跳转到原来的界面。

解决方法：在action中获取表单数据并修改联系人信息。

1、在src/components/edit.tsx中新增action函数：

xxxxxxxxxx
3
1
export const action = () => {
2
    return null;
3
}

并挂载到路由上：

xxxxxxxxxx
26
1
// src/main.tsx
2
​
3
import EditContact, { loader as editContactLoader, action as editContactAction } from '@/components/edit'
4
​
5
const router = createBrowserRouter([
6
  {
7
    path: '/',
8
    element: <Root />,
9
    errorElement: <ErrorPage />,
10
    loader: rootLoader,
11
    action: rootAction,
12
    children: [
13
      {
14
        path: "contacts/:id",
15
        element: <Contact />,
16
        loader: contactLoader
17
      },
18
      {
19
        path: "contacts/:id/edit",
20
        element: <EditContact />,
21
        loader: editContactLoader,
22
        action: editContactAction
23
      }
24
    ]
25
  },
26
])

2、在EditContact组件中，使用的是react-router-dom提供的Form组件，所以提交的数据会被action接收到：

先引入action参数的TS类型：

xxxxxxxxxx
1
1
import type { ActionFunctionArgs } from 'react-router-dom';

然后在action中输出参数看一下：

xxxxxxxxxx
4
1
export const action = ({ request }: ActionFunctionArgs) => {
2
    console.log(request)
3
    return null
4
}

注意：

这里的Form表单并没有指定action，通过上面学习的知识，我可以知道action实际指向了组件在router里面注册的path，这一点很好理解。

但是Form里面有两个button，怎么确定点击Save按钮是触发表格提交的，而点击Cancel不会触发表格的提交呢？其实button的type属性就规定了能否触发，如果type="submit"就会触发。

看一下输出即可知道，request本身上并不能直接得到表单数据，但是在它的原型上有一个formData函数，通过这个函数可以得到表单的数据，测试一下：

xxxxxxxxxx
4
1
export const action = ({ request }: ActionFunctionArgs) => {
2
    console.log(request.formData())
3
    return null
4
}

可以看到，request.formData()返回的是Promise对象，所以要用async...await来使用。

xxxxxxxxxx
5
1
export const action = async ({ request }: ActionFunctionArgs) => {
2
    const formdata = await request.formData();
3
    console.log(formdata)
4
    return null
5
}

由于提交数据的方法接收的是对象，而不是formData类型，所以需要将formData数据转为对象，使用Object.fromEntries()方法：

xxxxxxxxxx
6
1
export const action = async ({ request }: ActionFunctionArgs) => {
2
    const formdata = await request.formData();
3
    const form = Object.fromEntries(formdata)
4
    console.log(form)
5
    return null
6
}

可以看到，已经获取到想要的数据了。

3、从src/contacts.ts中引入更新联系人信息的方法：

xxxxxxxxxx
1
1
import { updateContact } from '@/contacts';